<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TAIMSAL S.A. de C.V.</title>
        <meta name="description" content="Análisis Financiero para TAIMSAL S.A. de C.V" />
        <meta name="author" content="Flacas Team" />
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
        <link rel="stylesheet" href="css/main.css" />
        <link rel="stylesheet" href="css/theme/default.css" id="theme" />
        <link rel="stylesheet" href="lib/css/zenburn.css" />
    </h:head>

    <h:body onload="#{financieroController.generarGAF()}">

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h2>
                        <br />
                    </h2>
                    <h1>
                        <br/>Razones Financieras</h1>
                </section>
                <!-- RAZONES FINANCIERAS -->
                <section>
                    <!-- RAZON CIRCULANTE -->
                    <h:panelGrid id="razon-circu" columns="1" width="900" bgcolor="#ffffff">
                        <br />
                        <p:barChart value="#{financieroController.chartModel}" legendPosition="#{financieroController.legendPosition}"
                                    zoom="true" animate="true"  orientation="horizontal"
                                    title="Razón Circulante" style="width: 800px; height: 400px; margin-left: 5%" />  

                        <br />
                        <h:form>
                            <p:commandButton value="Act Circulante / Pas Circulante" 
                                             actionListener="#{financieroController.graficarValoresCirculantes}"
                                             update=":razon-circu"
                                             style="font-size: 14px" />
                            <p:commandButton value="Valor Razón Circulante" 
                                             actionListener="#{financieroController.graficarRazonCirculante}"
                                             update=":razon-circu"
                                             style="font-size: 14px" />
                        </h:form>
                        <br />
                    </h:panelGrid>
                </section>
                <section>
                    <!-- INDICE DE ENDEUDAMIENTO -->
                    <h:panelGrid id="endeuda" columns="1" width="900" bgcolor="#ffffff">
                        <br />
                        <p:lineChart value="#{financieroController.chartModel}" legendPosition="#{financieroController.legendPosition}"
                                     zoom="true" animate="true"  
                                     title="Índice de Endeudamiento" style="width: 800px; height: 400px; margin-left: 5%" />  

                        <br />
                        <h:form>
                            <p:commandButton value="Pasivos / Activos" 
                                             actionListener="#{financieroController.graficarActivoVrsPasivo}"
                                             update=":endeuda"
                                             style="font-size: 14px" />
                            <p:commandButton value="Valor Índice" 
                                             actionListener="#{financieroController.graficarIndiceEndeuda}"
                                             update=":endeuda"
                                             style="font-size: 14px" />
                        </h:form>
                        <br />
                    </h:panelGrid>
                </section>
                <section>
                    <!-- MARGEN DE UTILIDAD -->
                    <h:panelGrid id="margen-util" columns="1" width="900" bgcolor="#ffffff">
                        <br />
                        <p:barChart value="#{financieroController.chartModel}" legendPosition="#{financieroController.legendPosition}"
                                    zoom="true" animate="true"  
                                    title="Margen de Utilidad" style="width: 800px; height: 400px; margin-left: 5%" />  

                        <br />
                        <h:form>
                            <p:commandButton value="Utilidad / Ventas" 
                                             actionListener="#{financieroController.graficarUtilidadVrsVentas}"
                                             update=":margen-util"
                                             style="font-size: 14px" />
                            <p:commandButton value="Valor Margen" 
                                             actionListener="#{financieroController.graficarMargenUtilidad}"
                                             update=":margen-util"
                                             style="font-size: 14px" />
                        </h:form>
                        <br />
                    </h:panelGrid>
                </section>


                <section>
                    <!-- ANALISIS DUPONT -->
                    <h:form id="dupont">  
                        <h2>Análisis DUPONT</h2>
                        <br />
                        <p:tree id="dupont-tree" value="#{financieroController.dupont}" var="node"
                                style="font-size: 25px; width: 500px; margin-left: 23%; text-align: center">  
                            <p:treeNode id="treeNode" >  
                                <h:outputText value="#{node.razon}" style="color: #cccccc"/>
                                <br />
                                <h:outputText value="#{node.valor}"> 
                                    <f:convertNumber pattern="#,##0.00;(#,##0.00)"
                                                     locale="#{usuarioController.locale}"/>
                                </h:outputText>  
                            </p:treeNode>  
                        </p:tree>
                        <br />
                        <p:selectOneListbox  value="#{financieroController.periodoSelected}" 
                                             style="width: 120px; height: 100px; font-size: 14px; 
                                             display: inline-block">
                            <f:selectItems value="#{periodoController.itemsSelect}"/> 
                        </p:selectOneListbox>
                        <p:commandButton value="Cambiar Período" 
                                         actionListener="#{financieroController.analizarDupont}"
                                         update="dupont-tree"
                                         style="font-size: 14px; display: inline-block; vertical-align: top" />
                    </h:form>  
                </section>
                <section>
                    <h2>
                        <br />
                    </h2>
                    <h1>
                        <br/>Apalancamiento Financiero</h1>
                </section>
                <section>
                    <!-- APALANCAMIENTO FINANCIERO -->
                    <h:form id="gaf">
                        <p:dataGrid id="gaf" value="#{financieroController.periodos}" 
                                    var="per" columns="1" rows="1" paginator="true"
                                    paginatorTemplate="{PageLinks}" paginatorAlwaysVisible="false">
                            <p:panel style="text-align: center">  
                                <h:outputText value="#{per.toString()}" style="font-weight: bolder; 
                                              text-decoration: underline"/>
                                <br />
                                <br />
                                <h:outputText value="Cambio UPA = " />
                                <h:outputText value="#{per.cambioPorcUPAPeriodo}">
                                    <f:convertNumber pattern="#,##0.00;(#,##0.00)"
                                                     locale="#{usuarioController.locale}"/>
                                </h:outputText>
                                <br />
                                <h:outputText value="Cambio EBIT = " />
                                <h:outputText value="#{per.cambioPorcEBITPeriodo}">
                                    <f:convertNumber pattern="#,##0.00;(#,##0.00)"
                                                     locale="#{usuarioController.locale}"/>
                                </h:outputText>
                                <br />
                                <h:outputText value="GAF = " />
                                <h:outputText value="#{per.gafPeriodo}">
                                    <f:convertNumber pattern="#,##0.00;(#,##0.00)"
                                                     locale="#{usuarioController.locale}"/>
                                </h:outputText>
                            </p:panel>  
                        </p:dataGrid>
                        <br />
                        <br />
                        <a href="pronosticos.xhtml" target="_blank" style="float: right; margin-right: 10px">
                            Pronósticos ->
                        </a>
                    </h:form>
                </section>

            </div>

            <!-- The navigational controls UI -->
            <aside class="controls">
                <a class="left" href="#">&#x25C4;</a>
                <a class="right" href="#">&#x25BA;</a>
                <a class="up" href="#">&#x25B2;</a>
                <a class="down" href="#">&#x25BC;</a>
            </aside>

            <!-- Presentation progress bar -->
            <div class="progress"><span></span></div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>

        <script>
            
            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
				
                theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'concave'
            });
			
        </script>

    </h:body>
</html>
